<template>
  <BaseModal title="导出案件" icon="📤" :show="show" @close="$emit('update:show', false)">
    <form @submit.prevent="handleSubmit">
      <div class="form-section">
        <h3 class="section-title">
          <span class="section-indicator"></span>
          导出设置
        </h3>

        <div class="form-group">
          <label>导出路径</label>
          <div class="file-input-wrapper">
            <div class="input-wrapper flex-1">
              <span class="input-icon">📂</span>
              <input type="text" v-model="form.exportPath" placeholder="请选择导出路径" readonly class="input-readonly">
            </div>
            <button type="button" class="btn-secondary" @click="selectPath">浏览</button>
          </div>
        </div>

        <div class="form-group">
          <label>导出人</label>
          <div class="input-wrapper">
            <span class="input-icon">👤</span>
            <input type="text" v-model="form.exporterName" placeholder="请输入导出人姓名">
          </div>
        </div>
      </div>

      <div class="form-section">
        <h3 class="section-title">
          <span class="section-indicator"></span>
          安全选项
        </h3>

        <div class="form-group">
          <label class="checkbox-label">
            <input type="checkbox" v-model="form.encryptPackage">
            <span>加密整个案件包</span>
          </label>
        </div>

        <div class="form-group" v-if="form.encryptPackage">
          <label>包加密密码</label>
          <div class="input-wrapper">
            <span class="input-icon">🔑</span>
            <input type="password" v-model="form.packagePassword" placeholder="请输入加密密码">
          </div>
        </div>
      </div>

      <div class="form-actions">
        <button type="button" class="btn-cancel" @click="$emit('update:show', false)">✖️ 取消</button>
        <button type="submit" class="btn-save" :disabled="loading || !form.exportPath">
          {{ loading ? '导出中...' : '📤 开始导出' }}
        </button>
      </div>
    </form>
  </BaseModal>
</template>

<script setup>
import { ref } from 'vue'
import BaseModal from './BaseModal.vue'
import { useCaseStore } from '../stores/case'

const props = defineProps({
  show: Boolean,
  caseId: {
    type: Number,
    required: true
  }
})

const emit = defineEmits(['update:show', 'close', 'success'])
const caseStore = useCaseStore()
const loading = ref(false)

const form = ref({
  exportPath: '',
  exporterName: '',
  encryptPackage: false,
  packagePassword: ''
})

const selectPath = async () => {
  if (window.electronAPI) {
    const result = await window.electronAPI.file.selectExportPath()
    if (result && !result.canceled && result.filePaths.length > 0) {
      form.value.exportPath = result.filePaths[0]
    }
  }
}

const handleSubmit = async () => {
  if (!form.value.exportPath) return
  
  loading.value = true
  try {
    if (window.electronAPI) {
      await window.electronAPI.case.export(props.caseId, {
        exportPath: form.value.exportPath,
        exporterName: form.value.exporterName,
        encryptPackage: form.value.encryptPackage,
        packagePassword: form.value.packagePassword
      })
      emit('success')
      emit('update:show', false)
    }
  } catch (error) {
    console.error(error)
    alert('导出失败: ' + error.message)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
/* Reuse styles */
.form-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.section-title {
  margin: 0 0 20px;
  font-size: 16px;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-indicator {
  display: inline-block;
  width: 4px;
  height: 16px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); /* Different color for export */
  border-radius: 2px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.file-input-wrapper {
  display: flex;
  gap: 10px;
}

.flex-1 {
  flex: 1;
}

.input-wrapper {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #909399;
}

input {
  width: 100%;
  padding: 10px 12px 10px 40px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s;
  box-sizing: border-box;
}

input:focus {
  border-color: #4facfe;
  box-shadow: 0 0 0 2px rgba(79, 172, 254, 0.2);
  outline: none;
}

.input-readonly {
  background: #f5f7fa;
  color: #606266;
  cursor: not-allowed;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.checkbox-label input {
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  accent-color: #4facfe;
}

.btn-secondary {
  padding: 0 20px;
  border: 1px solid #dcdfe6;
  background: white;
  color: #606266;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-secondary:hover {
  border-color: #4facfe;
  color: #4facfe;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.btn-cancel {
  padding: 10px 24px;
  border: 1px solid #dcdfe6;
  background: white;
  color: #606266;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-cancel:hover {
  background: #f5f7fa;
  border-color: #c0c4cc;
}

.btn-save {
  padding: 10px 24px;
  border: none;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);
}

.btn-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(79, 172, 254, 0.4);
}

.btn-save:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
</style>
